<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <link rel="stylesheet" href="./font_3752976_0q5k0vxb6gok/iconfont.css">
    <link rel="stylesheet" href="./详情页外部样式.css">
</head>

<body>
    <!-- 最外层盒子 -->
    <div class="box">

        <!-- 左边售后服务部分 -->
        <div class="box_left">

            <div class="header">
                <div class="top">

                </div>

                <div class="bottom">

                </div>
            </div>

            <!-- 天猫超市购物承诺部分 -->
            <div class="section">

                <div class="title">
                    天猫超市购物承诺
                </div>
                <div class="text">
                    <p> 1、天猫超市所有在售商品均可开具正规发票</p>
                    <p>2、天猫超市所有在售商品均保障正品</p>
                </div>

                <div class="title">
                    退货说明与流程
                </div>
                <img src="https://img.alicdn.com/tps/i1/T1FyZ4FaFbXXXUVYrv-710-123.jpg" alt="">


                <div class="title">
                    退货服务标准
                </div>

            </div>

            <!-- 安全提示和内容声明部分 -->
            <div class="footer"></div>
        </div>

        <!-- 右边图片部分 -->
        <div class="box_right">
            <p>-------本店同类好评商品-------</p>
            <template v-for="(item,index) in images" :key="index">
                <img :src='item'>

            </template>

        </div>

    </div>
</body>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
    $.get("http://localhost:3000/getAll", function (data) {
        // console.log(data.right);
        let arr = data.right.map((item, index) => {
            let count = 0
            return `
                    <a href="">${item[count++]}</a><span>|</span>
                    <a href="">${item[count++]}</a><span>|</span>
                    <a href="">${item[count]}</a>
            `
        })
        $('.top').html(arr)




        let arr2 = data.shouhou.map((item, index) => {
            // console.log(item);
            return `
            <div class="item">
                        <div class="item_left">
                            <i class="icon iconfont icon-zhengpinbaozhang2"></i>
                            <strong>${item[0]}</strong>
                        </div>
                        <span>${item[1]}</span>
            </div>
            `
        })
        $('.bottom').html(arr2)





        let arr3 = data.wang.map((item, index) => {
            return `
                <div class="back">
                    <strong>${item[0]}</strong>
                    <li>${item[1]}</li>
                    <li>${item[2]}</li>
                </div>
            `})
        $('.section').append(arr3)




        let arr4 = data.jun.map((item, inex) => {
            console.log(item);
            return `
            <div class="saftyBox">
                    <div class="safetyTips">
                        <div id="tips"><strong>${item[0]}</strong></div>
                        <div class="text">
                            ${item[1]}<a href="#">UC浏览器</a>
                        </div>
                    </div>
            </div>
            `})
        $('.footer').html(arr4)





        // let arr5 = data.shouhourightimg.map((item,index)=>{return`<img src=${item} alt="">`})
        // $('.box_right').append(arr5)

    })




    axios.get("http://localhost:3000/getAll").then(r => {
        console.log(r.data.shouhourightimg);
        let app = new Vue({
            el: '.box_right',
            data: {
                images: r.data.shouhourightimg
            }
        })
    })

</script>

</html>